<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布文章</title>
    <link rel="shortcut icon" href="/static/img/Head.png" type="image/x-icon"/>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/plugins/zTree_v3/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" class="heightlightLink default" href="http://home.zhangbin.xin/heightlight/css/default.css">
    <link rel="stylesheet" class="heightlightLink arta" href="http://home.zhangbin.xin/heightlight/css/arta.css"
          disabled="true">
    <link rel="stylesheet" class="heightlightLink agate" href="http://home.zhangbin.xin/heightlight/css/agate.css"
          disabled="true">
    <link rel="stylesheet" class="heightlightLink sunburst" href="http://home.zhangbin.xin/heightlight/css/sunburst.css"
          disabled="true">
    <link rel="stylesheet" class="heightlightLink idea" href="http://home.zhangbin.xin/heightlight/css/idea.css"
          disabled="true">
    <link rel="stylesheet" href="/static/plugins/fileinput-4.1.9/css/fileinput.min.css"/>
    <link rel="stylesheet" href="/static/css/back_article_comm.css">
    <link rel="stylesheet" href="/static/css/back_article_edit.css">

</head>
<body>
<div class="container-fluid">
    <div class="panel panel-warning">
        <div class="panel-heading">发布文章</div>
        <div class="panel-body">
            <form class="bs-example bs-example-form">

                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <span class="input-group-addon">文章标题</span>
                        <input type="text" id="title" class="form-control" placeholder="请输入文章标题..."
                               data-placement="top">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default ztreeBtn">
                                所属菜单
                                <span class="caret"></span>
                            </button>
                            <div class="ztreeContainer dropdown-menu" id="menuTree" style="display: none;">
                                <ul class="ztree" id="ztree"></ul>
                            </div>
                        </div>
                        <input type="text" class="form-control " disabled id="menu" placeholder="请选择所属菜单..."
                               data-placement="top">
                    </div>
                </div>

                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <span class="input-group-addon">翻牌正面描述</span>
                        <input type="text" id="front_descr" class="form-control" placeholder="请输入翻牌正面描述..."
                               data-placement="top">
                    </div>
                </div>

                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <span class="input-group-addon">翻牌背面描述</span>
                        <input type="text" id="back_descr" class="form-control" placeholder="请输入翻牌背面描述..."
                               data-placement="top">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle inputBtn">
                                能否演示
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu demo">
                                <li><a data="1">能</a></li>
                                <li><a data="0">不能</a></li>
                            </ul>
                        </div>
                        <input type="text" class="form-control" id="is_demo" data-placement="top" disabled>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 demo_url" style="visibility: hidden;">
                    <div class="input-group">
                        <span class="input-group-addon">演示地址</span>
                        <input type="text" id="demo_url" class="form-control" placeholder="请输入演示地址..."
                               data-placement="top">
                    </div>
                </div>

                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle inputBtn">
                                能否下载资源
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a data="1">能</a></li>
                                <li><a data="0">不能</a></li>
                            </ul>
                        </div>
                        <input type="text" class="form-control" id="is_download" data-placement="top" disabled>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="input-group">
                        <span class="input-group-addon">翻牌正面banner</span>
                        <input type="text" id="front_img" class="form-control" placeholder="请上传翻牌正面banner..."
                               data-placement="top">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 upload_banner_file upload_file" data-placement="top">
                    <input id="file_img" class="file" type="file" name="files" multiple data-min-file-count="1"/>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 upload_zip_file upload_file" data-placement="top">
                    <input id="file_zip" class="" type="file" name="files" data-min-file-count="1"/>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12" data-placement="top" id="wangeditorContainer"
                     style="height:570px;padding:0;">
                    <div id="wangeditorContent" style="height:570px;min-width:800px;margin:0;"></div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <a class="btn btn-primary submit" data-val="saveAndPublish">保存并发布</a>
                    <a class="btn btn-primary submit" data-val="save">仅保存</a>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal-backdrop" style="display:none;background-color: rgba(0,0,0,0.5)"></div>
<script type="text/javascript" src="/static/plugins/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/static/plugins/fileinput-4.1.9/fileinput.min.js"></script><!--必须在jquery之后加载-->
<script type="text/javascript" src="/static/plugins/fileinput-4.1.9/locales/fileinput_locale_zh.js"></script>
<!--将fileinput.js转换为中文显示-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
<script src="/static/plugins/zTree_v3/js/jquery.ztree.core.js"></script>
<script src="/static/plugins/hightlisht-9.12/highlight.pack.js"></script>
<script src="/static/plugins/wangEditor-3.1.1/wangEditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.5.6/jquery.nicescroll.js"></script>
<script src="/static/plugins/layer-3.1.1/layer.js"></script>
<script type="text/javascript" src='https://unpkg.com/qiniu-js@2.2.2/dist/qiniu.min.js'></script>
<script src="/static/js/back_article_comm.js"></script>
<script src="/static/js/back_article_edit.js"></script>
<script>
    (function ($) {
        "use strict";
        $.fn.fileinput.locales.zb = {
            browseLabel: '选择banner',
            dropZoneTitle: '选择翻牌正面banner'
        };
        $.extend($.fn.fileinput.defaults, $.fn.fileinput.locales.zh, $.fn.fileinput.locales.zb);
    })(window.jQuery);

    $(function () {
        $(".panel .dropdown-menu").mouseenter(dropdownMenuMouseEnter).mouseleave(dropdownMenuMouseLeave);
        $(".panel .inputBtn,.panel .ztreeBtn").click(ztreeBtnClick);//选择所属菜单单机事件
        $(".panel .submit").click(submitClick);//保存
        $(".panel .input-group input").on("keyup", inputKeyUpEvent);//input键盘事件
        $(".panel ul.dropdown-menu li a").click(dropdownMenuClick)//下拉菜单单内容机事件
        $(".panel .input-group ul.demo > li > a").click(isDemoClick);//下拉菜单内容单击事件
    })

    //需要在$(function(){})外面初始化上传插件
    $("#file_img").fileinput({
        uploadAsync: true,//是否为异步上传
        uploadUrl: "javascript:void(0)", //设置一个上传url (不指定参数，用自定义函数执行业务)
        deleteUrl: "javascript:void(0)",//删除文件时的请求路径
        deleteExtraData: {},//删除文件时候的额外参数
        uploadExtraData: {},//上传文件时候的额外参数
        allowedFileTypes: ['image'],//允许上传的文件类型
        allowedFileExtensions: ['jpg', 'png', 'gif'],//类型扩展 allowedFileTypes会让此属性失效
        //allowedPreviewTypes:['image'],//允许什么类型的文件可预览。默认是['image', 'html', 'text', 'video', 'audio', 'flash','object']，因此所有的文件类型默认被以object来预览。
        //allowedPreviewTypes:false,//不预览任何类型的文件(不会显示预览窗口)
        dropZoneEnabled: true,//是否显示拖拽区域
        maxFileSize: 300,//允许上传文件的大小，（单位：KB），包括扩展类型文件的限制
        /*previewSettings: {
            image: {height: "100px"},//设置预览文件的显示大小  (我改了js源文件，设置固定高度100px)
        },*/
        maxFileCount: 1, //表示允许同时上传的最大文件个数
        showUpload: true,//是否显示上传按钮
        showCaption: true,//是否显示标题
        browseClass: "btn btn-primary",//按钮样式
        showPreview: true,//是否显示预览
        showRemove: true,//事都显示移除按钮
        showCancel: false,//是否显示取消按钮
        showClose: false//是否显示关闭按钮
    });
    //初始化压缩包上传插件
    $("#file_zip").fileinput({
        uploadAsync: true,//是否为异步上传
        uploadUrl: "javascript:void(0)", //设置一个上传url (不指定参数，用自定义函数执行业务)
        deleteUrl: "javascript:void(0)",//删除文件时的请求路径
        deleteExtraData: {},//删除文件时候的额外参数
        uploadExtraData: {},//上传文件时候的额外参数

        //allowedFileTypes: ['image'],//允许上传的文件类型
        allowedFileExtensions: ['zip', 'rar'],//类型扩展 allowedFileTypes会让此属性失效
        //这里不然.rar文件加载显示内容，故填一个其他类型防止被记载内容卡住页面
        allowedPreviewTypes: ['image'],//允许什么类型的文件可预览。默认是['image', 'html', 'text', 'video', 'audio', 'flash','object']，因此所有的文件类型默认被以object来预览。
        //allowedPreviewTypes:false,//不预览任何类型的文件(不会显示预览窗口)
        //dropZoneEnabled: true,//是否显示拖拽区域
        //maxFileSize: 100,//允许上传文件的大小，（单位：KB），包括扩展类型文件的限制
        /*previewSettings: {
            image: {height: "100px"},//设置预览文件的显示大小  (我改了js源文件，设置固定高度100px)
        },*/
        browseLabel: '选择资源文件',
        dropZoneTitle: '选择资源文件',
        maxFileCount: 1, //表示允许同时上传的最大文件个数
        showUpload: true,//是否显示上传按钮
        showCaption: true,//是否显示标题
        browseClass: "btn btn-primary",//按钮样式
        showPreview: true,//是否显示预览
        showRemove: true,//事都显示移除按钮
        showCancel: false,//是否显示取消按钮
        showClose: false
    });


    //上传文件公用
    function uploadFile(file, key, token, $upload, edit_var_key, type) {
        var suffix_name = file.name.substring(file.name.lastIndexOf("."));
        key = key + suffix_name;
        var putExtra = {
            fname: "",//文件原文件名
            params: "",//用来放置自定义变量
            mimeType: null //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
        };
        var config = {
            useCdnDomain: true,//表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
            //disableStatisticsReport:true,//是否禁用日志报告，为布尔值，默认为false。
            //region:null,//当为 null 或 undefined 时，自动分析上传域名区域
            //retryCount:3,//上传自动重试次数（整体重试次数，而不是某个分片的重试次数）；默认 3 次（即上传失败后最多重试两次）；目前仅在上传过程中产生 599 内部错误时生效，但是未来很可能会扩展为支持更多的情况。
            //concurrentRequestLimit:3,//分片上传的并发请求量，number，默认为3；因为浏览器本身也会限制最大并发量，所以最大并发量与浏览器有关。
            //checkByMD5:false,//是否开启 MD5 校验，为布尔值；在断点续传时，开启 MD5 校验会将已上传的分片与当前分片进行 MD5 值比对，若不一致，则重传该分片，避免使用错误的分片。读取分片内容并计算 MD5 需要花费一定的时间，因此会稍微增加断点续传时的耗时，默认为 false，不开启。
        };
        var observer = {
            next(loaded) {//进度条使用
                var precent = loaded.total.percent
                if (precent) {
                    precent = parseInt(precent);
                    $upload.find(".progress-bar").css('width', precent + '%').text(precent + '%');
                }
            }, error(code, message, isRequestError) {
                layer.msg("上传文件出错了！", fn);
            }, complete(res) {
                if (res.key) {
                    edit_var[edit_var_key] = res.key;//当前上传的key
                    if (edit_var_key == 'curImgKey') {
                        $("#front_img").val(res.key);
                        layer.msg("banner上传成功!", fn);
                    } else if (edit_var_key == 'curZipKey') {
                        $("#is_download").attr("data-zip", res.key);
                        layer.msg("演示压缩包上传成功!", fn);
                    }
                } else {
                    layer.msg("上传文件未返回资源空间，上传失败！", fn);
                }
            }
        };
        var observable = qiniu.upload(file, key, token, putExtra, config)
        var subscription = observable.subscribe(observer);// 上传开始
        //subscription.unsubscribe() // 上传取消
        //绑定删除文件事件
        $upload.one("click", ".fileinput-remove-button", function () {
            var key = edit_var[edit_var_key];
            if (!key) {
                layer.msg("资源空间不存在，删除文件失败！")
                return false;
            }
            $.ajax({
                url: "/article/back/delQnyArtFile.zb",
                dataType: "JSON",
                data: {key: key, type: type}
            }).done(function (res) {
                if (res && res.success) {
                    edit_var[edit_var_key] = "";
                    if (edit_var_key == 'curImgKey') {
                        $("#front_img").val("");
                    } else if (edit_var_key == 'curZipKey') {
                        $("#is_download").attr("data-zip", "");
                    }
                    layer.msg(res.msg, fn);
                } else {
                    layer.msg(res.msg || "删除文件失败！", fn)
                }
            }).fail(function () {
                layer.msg("可能由于网路等原因删除文件失败！", fn)
            })
        })
    }

    //上传banner获取token 需要在初始化插件之后绑定才有用
    var $uploadBanner = $(".upload_banner_file");
    $uploadBanner.find(".fileinput-upload-button").off().on("click", function () {
        //获取token
        $.ajax({
            url: "/article/back/getBannerQnyToken.zb",
            dataType: "JSON"
        }).done(function (res) {
            if (res && res.success) {
                //显示进度条
                $uploadBanner.find(".kv-upload-progress").removeClass("hide");
                var file = $("#file_img").get(0).files[0];
                uploadFile(file, res.data.key_prefix, res.data.token, $uploadBanner, 'curImgKey', "banner");
            } else {
                layer.msg("获取token失败！", fn);
            }
        }).fail(function () {
            layer.msg("获取token失败！", fn);
        })
    });
    //上传压缩包获取token 需要在初始化插件之后绑定才有用
    var $uploadZip = $(".upload_zip_file");
    $uploadZip.find(".fileinput-upload-button").off().on("click", function () {
        //获取token
        $.ajax({
            url: "/article/back/getDemoZipQnyToken.zb",
            dataType: "JSON"
        }).done(function (res) {
            if (res && res.success) {
                //显示进度条
                $uploadZip.find(".kv-upload-progress").removeClass("hide");
                var file = $("#file_zip").get(0).files[0];
                uploadFile(file, res.data.key_prefix, res.data.token, $uploadZip, 'curZipKey', "demoZip");
            } else {
                layer.msg("获取token失败！", fn);
            }
        }).fail(function () {
            layer.msg("获取token失败！", fn);
        })
    });
</script>
</body>
</html>